/**
 * Created by liuyuantao on 2017-6-11.
 */
(function ($) {
    function SeceneDetail() {
        var _this = this;
        $("#iPicture1").iPicture();
    }

    SeceneDetail.prototype.initEvent = function () {
        var _this = this;
        layui.use('form', function () {
            var form = layui.form();
            form.on('radio(show)', function (data) {
                var targetVal = data.value; //被点击的radio的value值
                var selector = $(".ip_tooltip");
                if (parseInt(targetVal) === 1) {
                    selector.css('z-index', '9999');
                    selector.addClass('show');
                    selector.find(".xs").css('display', 'block');
                    selector.find(".ip_descr").addClass("ltr-slide");
                } else {
                    selector.css('z-index', '1');
                    selector.find(".xs").css('display', 'none');
                    selector.find(".ip_descr").removeClass("ltr-slide");
                    selector.removeClass('show');
                }
            });
            form.on('radio(zoom)', function (data) {
                var targetVal = data.value; //被点击的radio的value值
                var selector = $(".zoom-item");

            });

        });
        $(".type-li-box li").click(function () {
            var seceneId = $("#seceneId").val();
            $(this).siblings().find("a").removeClass("active");
            $(this).find("a").addClass("active");
            var typeId = $(".type-li-box .active").data("id");
            var userId = $(".person-li-box .active").data("id");
            location.href = "/outlines/secene/detail/" + seceneId + "/" + userId + "/" + typeId + "/";
        });
        $(".person-li-box li").click(function () {
            var seceneId = $("#seceneId").val();
            $(this).siblings().find("a").removeClass("active");
            $(this).find("a").addClass("active");
            var typeId = $(".type-li-box .active").data("id");
            var userId = $(".person-li-box .active").data("id");
            location.href = "/outlines/secene/detail/" + seceneId + "/" + userId + "/" + typeId + "/";
        });

        // 添加标注
        $("#iPicture1").dblclick(function (e) {
            var imagePosition = _this.getAbsPosition($("#iPicture1"));
            var clientPosition = _this.getMousePosition(e);
            var whichImg = $(this).find(".ip_tooltipImg").data("id");
            var seceneId = $("#seceneId").val();
            var top = clientPosition.y - imagePosition.y;
            var left = clientPosition.x - imagePosition.x;
            _this.openMarkWindow(seceneId, whichImg, top, left);
        });
        // 提交评论
        $("#submit-comment").click(function () {
            var seceneId = $("#seceneId").val();
            _this.submitComment(seceneId);
        });
    }
    SeceneDetail.prototype.submitComment = function (seceneId) {
        //提交评论
        $("#submit-comment").attr('disabled', true).text('提交ing...');
        var comment = $("#comment").val();
        if (typeof comment === "undefined" || comment === "") {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.msg("请输入评论内容", {icon: 5});
            });

            $("#submit-comment").attr('disabled', false).text('提交评论');
            return false;
        }
        $.ajax({
            type: "POST",
            url: "/outlines/secene/comment/" + seceneId,
            data: {"comment": comment},
            beforeSend: function (xhr) {
                xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
            },
            success: function (data) {
                $("#comment").val("");
                $(".comment-show ul").prepend(data);
                $("#submit-comment").attr('disabled', false).text('提交评论');
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $("#submit-comment").attr('disabled', false).text('提交评论');
            }
        });
    }
    SeceneDetail.prototype.openMarkWindow = function (seceneId, whichImg, top, left) {
        layui.use('layer', function (index) {
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '对所选区域进行描述',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['970px', '670px'],
                content: '/outlines/secene/ueditor_template/' + seceneId + '/' + whichImg + "/" + top + "/" + left,
                cancel: function () {
                    var seceneId = $("#seceneId").val();
                    var typeId = $(".type-li-box .active").data("id");
                    var userId = $(".person-li-box .active").data("id");
                    location.href = "/outlines/secene/detail/" + seceneId + "/" + userId + "/" + typeId + "/";
                }
            });
        });

    }

    /**
     *
     * @param
     * @returns {x: (number|Number), y: (number|Number)}
     */
    SeceneDetail.prototype.getAbsPosition = function ($element) {//获取匹配元素在当前视口的相对偏移
        var offset = $element.offset();
        return {'x': offset.left, 'y': offset.top};
    }

    /**
     * 获取鼠标相对于文档(body元素)的坐标
     * @param event
     * @returns {x: (Number|number), y: (Number|number)}
     */
    SeceneDetail.prototype.getMousePosition = function (event) {
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        return {'x': x, 'y': y};
    }
    $.SeceneDetail = SeceneDetail;
})(jQuery);
